<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Editor Grid Example</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <!-- GC --><!-- LIBS --><script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <!-- ENDLIBS --><script type="text/javascript" src="../../ext-all-debug.js"></script>
    <script type="text/javascript" src="gen-names.js"></script>
    <script type="text/javascript" src="RowEditor.js"></script>
    <script type="text/javascript" src="row-editor.js"></script>
    <link rel="stylesheet" type="text/css" href="grid-examples.css" />
    <!-- Common Styles for the examples -->
    <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
	<style type="text/css">
		.x-grid3 .x-window-ml{
			padding-left: 0;	
		} 
		.x-grid3 .x-window-mr {
			padding-right: 0;
		} 
		.x-grid3 .x-window-tl {
			padding-left: 0;
		} 
		.x-grid3 .x-window-tr {
			padding-right: 0;
		} 
		.x-grid3 .x-window-tc .x-window-header {
			height: 3px;
			padding:0;
			overflow:hidden;
		} 
		.x-grid3 .x-window-mc {
			border-width: 0;
			background: #cdd9e8;
		} 
		.x-grid3 .x-window-bl {
			padding-left: 0;
		} 
		.x-grid3 .x-window-br {
			padding-right: 0;
		}
		.x-grid3 .x-panel-btns {
			padding:0;
		}
		.x-grid3 .x-panel-btns td.x-toolbar-cell {
			padding:3px 3px 0;
		}
		.x-box-inner {
			zoom:1;
		}
		.ext-ie .x-row-editor .x-form-text {
		    margin:0 !important; 
		}
        .x-row-editor-header {
            height:2px;
            overflow:hidden;
            background: transparent url(images/row-editor-bg.gif) repeat-x 0 0;
        }
        .x-row-editor-footer {
            height:2px;
            overflow:hidden;
            background: transparent url(images/row-editor-bg.gif) repeat-x 0 -2px;
        }
        .ext-ie .x-row-editor-footer {
		    margin-top:-1px;
		}

        .x-row-editor-body {
            overflow:hidden;
            zoom:1;
            background: #ebf2fb;
            padding-top:2px;
        }
        .x-row-editor .x-btns {
            position:absolute;
            top:28px;
            left:20px;
            padding-left:5px;
            background: transparent url(images/row-editor-btns.gif) no-repeat 0 0;
        }
        .x-row-editor .x-btns .x-plain-bwrap {
            padding-right:5px;
            background: transparent url(images/row-editor-btns.gif) no-repeat right -31px;
        }
        .x-row-editor .x-btns .x-plain-body {
            background: transparent url(images/row-editor-btns.gif) repeat-x 0 -62px;
            height:31px;
        }
        .x-row-editor .x-btns .x-table-layout-cell {
            padding:3px;
        }
        .icon-user-add {
            background-image: url(../shared/icons/fam/user_add.gif) !important;
        }
        .icon-user-delete {
            background-image: url(../shared/icons/fam/user_delete.gif) !important;
        }
        
        .errorTip .x-tip-body ul{
            list-style-type:disc;
            margin-left:15px;
        }
    </style>
</head>
<body>
    <h1>Row Editor Grid Example</h1>
    <p>
        This example shows how to create a grid with inline row based editing using a custom row-editor.
   	The example code <a href="row-editor.js">row-editor.js</a> is not minified, so it's readable.
	</p> 
	<p>
        To use this example, be sure to include the <a href="RowEditor.js">RowEditor.js</a> file.
   	</p> 

    </p>
</body>
</html>
